<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Material Admin - Cards</title>

		<!-- BEGIN META -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="your,keywords">
		<meta name="description" content="Short explanation about this website">
		<!-- END META -->

		<!-- BEGIN STYLESHEETS -->
		<link href='http://fonts.useso.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css'/>
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/bootstrap.css?1422792965" />
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/materialadmin.css?1425466319" />
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/font-awesome.min.css?1422529194" />
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/material-design-iconic-font.min.css?1421434286" />
		<!-- END STYLESHEETS -->

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script type="text/javascript" src="../../assets/js/libs/utils/html5shiv.js?1403934957"></script>
		<script type="text/javascript" src="../../assets/js/libs/utils/respond.min.js?1403934956"></script>
		<![endif]-->
	</head>
	<body class="menubar-hoverable header-fixed menubar-pin ">

		<!-- BEGIN HEADER-->
		<header id="header" >
			<div class="headerbar">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="headerbar-left">
					<ul class="header-nav header-nav-options">
						<li class="header-nav-brand" >
							<div class="brand-holder">
								<a href="../../html/dashboards/dashboard.html">
									<span class="text-lg text-bold text-primary">MATERIAL ADMIN</span>
								</a>
							</div>
						</li>
						<li>
							<a class="btn btn-icon-toggle menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
								<i class="fa fa-bars"></i>
							</a>
						</li>
					</ul>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="headerbar-right">
					<ul class="header-nav header-nav-options">
						<li>
							<!-- Search form -->
							<form class="navbar-search" role="search">
								<div class="form-group">
									<input type="text" class="form-control" name="headerSearch" placeholder="Enter your keyword">
								</div>
								<button type="submit" class="btn btn-icon-toggle ink-reaction"><i class="fa fa-search"></i></button>
							</form>
						</li>
						<li class="dropdown hidden-xs">
							<a href="javascript:void(0);" class="btn btn-icon-toggle btn-default" data-toggle="dropdown">
								<i class="fa fa-bell"></i><sup class="badge style-danger">4</sup>
							</a>
							<ul class="dropdown-menu animation-expand">
								<li class="dropdown-header">Today's messages</li>
								<li>
									<a class="alert alert-callout alert-warning" href="javascript:void(0);">
										<img class="pull-right img-circle dropdown-avatar" src="../../assets/img/avatar2.jpg?1404026449" alt="" />
										<strong>Alex Anistor</strong><br/>
										<small>Testing functionality...</small>
									</a>
								</li>
								<li>
									<a class="alert alert-callout alert-info" href="javascript:void(0);">
										<img class="pull-right img-circle dropdown-avatar" src="../../assets/img/avatar3.jpg?1404026799" alt="" />
										<strong>Alicia Adell</strong><br/>
										<small>Reviewing last changes...</small>
									</a>
								</li>
								<li class="dropdown-header">Options</li>
								<li><a href="../../html/pages/login.html">View all messages <span class="pull-right"><i class="fa fa-arrow-right"></i></span></a></li>
								<li><a href="../../html/pages/login.html">Mark as read <span class="pull-right"><i class="fa fa-arrow-right"></i></span></a></li>
							</ul><!--end .dropdown-menu -->
						</li><!--end .dropdown -->
						<li class="dropdown hidden-xs">
							<a href="javascript:void(0);" class="btn btn-icon-toggle btn-default" data-toggle="dropdown">
								<i class="fa fa-area-chart"></i>
							</a>
							<ul class="dropdown-menu animation-expand">
								<li class="dropdown-header">Server load</li>
								<li class="dropdown-progress">
									<a href="javascript:void(0);">
										<div class="dropdown-label">
											<span class="text-light">Server load <strong>Today</strong></span>
											<strong class="pull-right">93%</strong>
										</div>
										<div class="progress"><div class="progress-bar progress-bar-danger" style="width: 93%"></div></div>
									</a>
								</li><!--end .dropdown-progress -->
								<li class="dropdown-progress">
									<a href="javascript:void(0);">
										<div class="dropdown-label">
											<span class="text-light">Server load <strong>Yesterday</strong></span>
											<strong class="pull-right">30%</strong>
										</div>
										<div class="progress"><div class="progress-bar progress-bar-success" style="width: 30%"></div></div>
									</a>
								</li><!--end .dropdown-progress -->
								<li class="dropdown-progress">
									<a href="javascript:void(0);">
										<div class="dropdown-label">
											<span class="text-light">Server load <strong>Lastweek</strong></span>
											<strong class="pull-right">74%</strong>
										</div>
										<div class="progress"><div class="progress-bar progress-bar-warning" style="width: 74%"></div></div>
									</a>
								</li><!--end .dropdown-progress -->
							</ul><!--end .dropdown-menu -->
						</li><!--end .dropdown -->
					</ul><!--end .header-nav-options -->
					<ul class="header-nav header-nav-profile">
						<li class="dropdown">
							<a href="javascript:void(0);" class="dropdown-toggle ink-reaction" data-toggle="dropdown">
								<img src="../../assets/img/avatar1.jpg?1403934956" alt="" />
								<span class="profile-info">
									Daniel Johnson
									<small>Administrator</small>
								</span>
							</a>
							<ul class="dropdown-menu animation-dock">
								<li class="dropdown-header">Config</li>
								<li><a href="../../html/pages/profile.html">My profile</a></li>
								<li><a href="../../html/pages/blog/post.html">My blog <span class="badge style-danger pull-right">16</span></a></li>
								<li><a href="../../html/pages/calendar.html">My appointments</a></li>
								<li class="divider"></li>
								<li><a href="../../html/pages/locked.html"><i class="fa fa-fw fa-lock"></i> Lock</a></li>
								<li><a href="../../html/pages/login.html"><i class="fa fa-fw fa-power-off text-danger"></i> Logout</a></li>
							</ul><!--end .dropdown-menu -->
						</li><!--end .dropdown -->
					</ul><!--end .header-nav-profile -->
					<ul class="header-nav header-nav-toggle">
						<li>
							<a class="btn btn-icon-toggle btn-default" href="#offcanvas-search" data-toggle="offcanvas" data-backdrop="false">
								<i class="fa fa-ellipsis-v"></i>
							</a>
						</li>
					</ul><!--end .header-nav-toggle -->
				</div><!--end #header-navbar-collapse -->
			</div>
		</header>
		<!-- END HEADER-->

		<!-- BEGIN BASE-->
		<div id="base">

			<!-- BEGIN OFFCANVAS LEFT -->
			<div class="offcanvas">
			</div><!--end .offcanvas-->
			<!-- END OFFCANVAS LEFT -->

			<!-- BEGIN CONTENT-->
			<div id="content">
				<section>
					<div class="section-header">
						<ol class="breadcrumb">
							<li class="active">Cards</li>
						</ol>
					</div>
					<div class="section-body contain-lg">

						<!-- BEGIN INTRO -->
						<div class="row">
							<div class="col-lg-12">
								<h1 class="text-primary">Cards</h1>
							</div><!--end .col -->
							<div class="col-lg-8">
								<article class="margin-bottom-xxl">
									<p class="lead">
										A card is a piece of paper that contains unique related data.
										Cards are typically an entry point to more complex and detailed information.
									</p>
								</article>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END INTRO -->

						<!-- BEGIN STYLING OPTIONS -->
						<div class="row">
							<div class="col-lg-12">
								<h2 class="text-primary">Styling options</h2>
							</div><!--end .col -->
							<div class="col-lg-8">
								<article class="margin-bottom-xxl">
									<p>
										Cards can be formatted in different ways so that it best suits its content.
										There are different styles available for this purpose which can be combined with each other.
									</p>
								</article>
							</div><!--end .col -->
						</div><!--end .row -->
						<div class="row">
							<div class="col-md-6">
								<div class="card">
									<div class="card-head">
										<header>Header</header>
										<div class="tools">
											<div class="btn-group">
												<div class="btn-group">
													<a href="#" class="btn btn-icon-toggle dropdown-toggle" data-toggle="dropdown"><i class="md md-colorize"></i></a>
													<ul class="dropdown-menu animation-dock pull-right menu-card-styling" role="menu" style="text-align: left;">
														<li><a href="javascript:void(0);" data-style="style-default-dark"><i class="fa fa-circle fa-fw text-default-dark"></i> Default dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-default"><i class="fa fa-circle fa-fw text-muted"></i> Default</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-light"><i class="fa fa-circle fa-fw text-default-light"></i> Default light</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-bright"><i class="fa fa-circle fa-fw text-default-bright"></i> Default bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-dark"><i class="fa fa-circle fa-fw text-primary-dark"></i> Primary dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary"><i class="fa fa-circle fa-fw text-primary"></i> Primary</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-light"><i class="fa fa-circle fa-fw text-primary-light"></i> Primary light</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-bright"><i class="fa fa-circle fa-fw text-primary-bright"></i> Primary bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-dark"><i class="fa fa-circle fa-fw text-accent-dark"></i> Accent dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent"><i class="fa fa-circle fa-fw text-accent"></i> Accent</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-light"><i class="fa fa-circle fa-fw text-accent-light"></i> Accent light</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-bright"><i class="fa fa-circle fa-fw text-accent-bright"></i> Accent bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-danger"><i class="fa fa-circle fa-fw text-danger"></i> Danger</a></li>
														<li><a href="javascript:void(0);" data-style="style-warning"><i class="fa fa-circle fa-fw text-warning"></i> Warning</a></li>
														<li><a href="javascript:void(0);" data-style="style-success"><i class="fa fa-circle fa-fw text-success"></i> Success</a></li>
														<li><a href="javascript:void(0);" data-style="style-info"><i class="fa fa-circle fa-fw text-info"></i> Info</a></li>
													</ul>
												</div>
												<a class="btn btn-icon-toggle btn-refresh"><i class="md md-refresh"></i></a>
												<a class="btn btn-icon-toggle btn-collapse"><i class="fa fa-angle-down"></i></a>
												<a class="btn btn-icon-toggle btn-close"><i class="md md-close"></i></a>
											</div>
										</div>
									</div><!--end .card-head -->
									<div class="card-body">
										<p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Basic Card</em>
							</div><!--end .col -->
							<div class="col-md-6">
								<div class="card card-underline">
									<div class="card-head">
										<header>Header</header>
										<div class="tools">
											<div class="btn-group">
												<div class="btn-group">
													<a href="#" class="btn btn-icon-toggle dropdown-toggle" data-toggle="dropdown"><i class="md md-colorize"></i></a>
													<ul class="dropdown-menu animation-dock pull-right menu-card-styling" role="menu" style="text-align: left;">
														<li><a href="javascript:void(0);" data-style="style-default-dark"><i class="fa fa-circle fa-fw text-default-dark"></i> Default dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-default"><i class="fa fa-circle fa-fw text-muted"></i> Default</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-light"><i class="fa fa-circle fa-fw text-default-light"></i> Default light</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-bright"><i class="fa fa-circle fa-fw text-default-bright"></i> Default bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-dark"><i class="fa fa-circle fa-fw text-primary-dark"></i> Primary dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary"><i class="fa fa-circle fa-fw text-primary"></i> Primary</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-light"><i class="fa fa-circle fa-fw text-primary-light"></i> Primary light</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-bright"><i class="fa fa-circle fa-fw text-primary-bright"></i> Primary bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-dark"><i class="fa fa-circle fa-fw text-accent-dark"></i> Accent dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent"><i class="fa fa-circle fa-fw text-accent"></i> Accent</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-light"><i class="fa fa-circle fa-fw text-accent-light"></i> Accent light</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-bright"><i class="fa fa-circle fa-fw text-accent-bright"></i> Accent bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-danger"><i class="fa fa-circle fa-fw text-danger"></i> Danger</a></li>
														<li><a href="javascript:void(0);" data-style="style-warning"><i class="fa fa-circle fa-fw text-warning"></i> Warning</a></li>
														<li><a href="javascript:void(0);" data-style="style-success"><i class="fa fa-circle fa-fw text-success"></i> Success</a></li>
														<li><a href="javascript:void(0);" data-style="style-info"><i class="fa fa-circle fa-fw text-info"></i> Info</a></li>
													</ul>
												</div>
												<a class="btn btn-icon-toggle btn-refresh"><i class="md md-refresh"></i></a>
												<a class="btn btn-icon-toggle btn-collapse"><i class="fa fa-angle-down"></i></a>
												<a class="btn btn-icon-toggle btn-close"><i class="md md-close"></i></a>
											</div>
										</div>
									</div><!--end .card-head -->
									<div class="card-body">
										<p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Underlined Card</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<div class="row">
							<div class="col-md-6">
								<div class="card card-outlined style-primary">
									<div class="card-head">
										<div class="tools">
											<div class="btn-group">
												<div class="btn-group">
													<a href="#" class="btn btn-icon-toggle dropdown-toggle" data-toggle="dropdown"><i class="md md-colorize"></i></a>
													<ul class="dropdown-menu animation-dock pull-right menu-card-styling" role="menu" style="text-align: left;">
														<li><a href="javascript:void(0);" data-style="style-default-dark"><i class="fa fa-circle fa-fw text-default-dark"></i> Default dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-default"><i class="fa fa-circle fa-fw text-muted"></i> Default</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-light"><i class="fa fa-circle fa-fw text-default-light"></i> Default light</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-bright"><i class="fa fa-circle fa-fw text-default-bright"></i> Default bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-dark"><i class="fa fa-circle fa-fw text-primary-dark"></i> Primary dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary"><i class="fa fa-circle fa-fw text-primary"></i> Primary</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-light"><i class="fa fa-circle fa-fw text-primary-light"></i> Primary light</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-bright"><i class="fa fa-circle fa-fw text-primary-bright"></i> Primary bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-dark"><i class="fa fa-circle fa-fw text-accent-dark"></i> Accent dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent"><i class="fa fa-circle fa-fw text-accent"></i> Accent</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-light"><i class="fa fa-circle fa-fw text-accent-light"></i> Accent light</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-bright"><i class="fa fa-circle fa-fw text-accent-bright"></i> Accent bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-danger"><i class="fa fa-circle fa-fw text-danger"></i> Danger</a></li>
														<li><a href="javascript:void(0);" data-style="style-warning"><i class="fa fa-circle fa-fw text-warning"></i> Warning</a></li>
														<li><a href="javascript:void(0);" data-style="style-success"><i class="fa fa-circle fa-fw text-success"></i> Success</a></li>
														<li><a href="javascript:void(0);" data-style="style-info"><i class="fa fa-circle fa-fw text-info"></i> Info</a></li>
													</ul>
												</div>
												<a class="btn btn-icon-toggle btn-refresh"><i class="md md-refresh"></i></a>
												<a class="btn btn-icon-toggle btn-collapse"><i class="fa fa-angle-down"></i></a>
												<a class="btn btn-icon-toggle btn-close"><i class="md md-close"></i></a>
											</div>
										</div>
										<header><i class="fa fa-fw fa-tag"></i> Header</header>
									</div><!--end .card-head -->
									<div class="card-body">
										<p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Outlined Card with icon</em>
							</div><!--end .col -->
							<div class="col-md-6">
								<div class="card card-bordered style-primary">
									<div class="card-head">
										<div class="tools">
											<div class="btn-group">
												<div class="btn-group">
													<a href="#" class="btn btn-icon-toggle dropdown-toggle" data-toggle="dropdown"><i class="md md-colorize"></i></a>
													<ul class="dropdown-menu animation-dock pull-right menu-card-styling" role="menu" style="text-align: left;">
														<li><a href="javascript:void(0);" data-style="style-default-dark"><i class="fa fa-circle fa-fw text-default-dark"></i> Default dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-default"><i class="fa fa-circle fa-fw text-muted"></i> Default</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-light"><i class="fa fa-circle fa-fw text-default-light"></i> Default light</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-bright"><i class="fa fa-circle fa-fw text-default-bright"></i> Default bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-dark"><i class="fa fa-circle fa-fw text-primary-dark"></i> Primary dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary"><i class="fa fa-circle fa-fw text-primary"></i> Primary</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-light"><i class="fa fa-circle fa-fw text-primary-light"></i> Primary light</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-bright"><i class="fa fa-circle fa-fw text-primary-bright"></i> Primary bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-dark"><i class="fa fa-circle fa-fw text-accent-dark"></i> Accent dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent"><i class="fa fa-circle fa-fw text-accent"></i> Accent</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-light"><i class="fa fa-circle fa-fw text-accent-light"></i> Accent light</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-bright"><i class="fa fa-circle fa-fw text-accent-bright"></i> Accent bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-danger"><i class="fa fa-circle fa-fw text-danger"></i> Danger</a></li>
														<li><a href="javascript:void(0);" data-style="style-warning"><i class="fa fa-circle fa-fw text-warning"></i> Warning</a></li>
														<li><a href="javascript:void(0);" data-style="style-success"><i class="fa fa-circle fa-fw text-success"></i> Success</a></li>
														<li><a href="javascript:void(0);" data-style="style-info"><i class="fa fa-circle fa-fw text-info"></i> Info</a></li>
													</ul>
												</div>
												<a class="btn btn-icon-toggle btn-refresh"><i class="md md-refresh"></i></a>
												<a class="btn btn-icon-toggle btn-collapse"><i class="fa fa-angle-down"></i></a>
												<a class="btn btn-icon-toggle btn-close"><i class="md md-close"></i></a>
											</div>
										</div>
										<header><i class="fa fa-fw fa-tag"></i> Header</header>
									</div><!--end .card-head -->
									<div class="card-body style-default-bright">
										<p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Outlined & solid header Card with icon</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<div class="row">
							<div class="col-md-6">
								<div class="card card-bordered style-primary">
									<div class="card-head">
										<div class="tools">
											<div class="btn-group">
												<div class="btn-group">
													<a href="#" class="btn btn-icon-toggle dropdown-toggle" data-toggle="dropdown"><i class="md md-colorize"></i></a>
													<ul class="dropdown-menu animation-dock pull-right menu-card-styling" role="menu" style="text-align: left;">
														<li><a href="javascript:void(0);" data-style="style-default-dark"><i class="fa fa-circle fa-fw text-default-dark"></i> Default dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-default"><i class="fa fa-circle fa-fw text-muted"></i> Default</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-light"><i class="fa fa-circle fa-fw text-default-light"></i> Default light</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-bright"><i class="fa fa-circle fa-fw text-default-bright"></i> Default bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-dark"><i class="fa fa-circle fa-fw text-primary-dark"></i> Primary dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary"><i class="fa fa-circle fa-fw text-primary"></i> Primary</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-light"><i class="fa fa-circle fa-fw text-primary-light"></i> Primary light</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-bright"><i class="fa fa-circle fa-fw text-primary-bright"></i> Primary bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-dark"><i class="fa fa-circle fa-fw text-accent-dark"></i> Accent dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent"><i class="fa fa-circle fa-fw text-accent"></i> Accent</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-light"><i class="fa fa-circle fa-fw text-accent-light"></i> Accent light</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-bright"><i class="fa fa-circle fa-fw text-accent-bright"></i> Accent bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-danger"><i class="fa fa-circle fa-fw text-danger"></i> Danger</a></li>
														<li><a href="javascript:void(0);" data-style="style-warning"><i class="fa fa-circle fa-fw text-warning"></i> Warning</a></li>
														<li><a href="javascript:void(0);" data-style="style-success"><i class="fa fa-circle fa-fw text-success"></i> Success</a></li>
														<li><a href="javascript:void(0);" data-style="style-info"><i class="fa fa-circle fa-fw text-info"></i> Info</a></li>
													</ul>
												</div>
												<a class="btn btn-icon-toggle btn-refresh"><i class="md md-refresh"></i></a>
												<a class="btn btn-icon-toggle btn-collapse"><i class="fa fa-angle-down"></i></a>
												<a class="btn btn-icon-toggle btn-close"><i class="md md-close"></i></a>
											</div>
										</div>
										<header>Header</header>
									</div><!--end .card-head -->
									<div class="card-body">
										<p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Colored Card</em>
							</div><!--end .col -->
							<div class="col-md-6">
								<div class="card">
									<div class="card-head">
										<div class="tools">
											<div class="btn-group">
												<div class="btn-group">
													<a href="#" class="btn btn-icon-toggle dropdown-toggle" data-toggle="dropdown"><i class="md md-colorize"></i></a>
													<ul class="dropdown-menu animation-dock pull-right menu-card-styling" role="menu" style="text-align: left;">
														<li><a href="javascript:void(0);" data-style="style-default-dark"><i class="fa fa-circle fa-fw text-default-dark"></i> Default dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-default"><i class="fa fa-circle fa-fw text-muted"></i> Default</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-light"><i class="fa fa-circle fa-fw text-default-light"></i> Default light</a></li>
														<li><a href="javascript:void(0);" data-style="style-default-bright"><i class="fa fa-circle fa-fw text-default-bright"></i> Default bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-dark"><i class="fa fa-circle fa-fw text-primary-dark"></i> Primary dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary"><i class="fa fa-circle fa-fw text-primary"></i> Primary</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-light"><i class="fa fa-circle fa-fw text-primary-light"></i> Primary light</a></li>
														<li><a href="javascript:void(0);" data-style="style-primary-bright"><i class="fa fa-circle fa-fw text-primary-bright"></i> Primary bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-dark"><i class="fa fa-circle fa-fw text-accent-dark"></i> Accent dark</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent"><i class="fa fa-circle fa-fw text-accent"></i> Accent</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-light"><i class="fa fa-circle fa-fw text-accent-light"></i> Accent light</a></li>
														<li><a href="javascript:void(0);" data-style="style-accent-bright"><i class="fa fa-circle fa-fw text-accent-bright"></i> Accent bright</a></li>
														<li><a href="javascript:void(0);" data-style="style-danger"><i class="fa fa-circle fa-fw text-danger"></i> Danger</a></li>
														<li><a href="javascript:void(0);" data-style="style-warning"><i class="fa fa-circle fa-fw text-warning"></i> Warning</a></li>
														<li><a href="javascript:void(0);" data-style="style-success"><i class="fa fa-circle fa-fw text-success"></i> Success</a></li>
														<li><a href="javascript:void(0);" data-style="style-info"><i class="fa fa-circle fa-fw text-info"></i> Info</a></li>
													</ul>
												</div>
												<a class="btn btn-icon-toggle btn-refresh"><i class="md md-refresh"></i></a>
												<a class="btn btn-icon-toggle btn-collapse"><i class="fa fa-angle-down"></i></a>
												<a class="btn btn-icon-toggle btn-close"><i class="md md-close"></i></a>
											</div>
										</div>
										<header>Header</header>
									</div><!--end .card-head -->
									<div class="card-body style-primary">
										<p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Card with colored body</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END STYLING OPTIONS -->

						<!-- BEGIN HEADER SIZES -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Sizes</h4>
							</div><!--end .col -->
							<div class="col-lg-8">
								<article class="margin-bottom-xxl">
									<p>
										Sometimes you have to put more or less emphasis on a card.
										You can do this using one of the headersize classes.
									</p>
								</article>
							</div><!--end .col -->
						</div><!--end .row -->
						<div class="row">
							<div class="col-lg-3 col-sm-6">
								<div class="card">
									<div class="card-head card-head-xs style-primary">
										<header>XS header</header>
										<div class="tools">
											<a class="btn btn-icon-toggle btn-close"><i class="md md-close"></i></a>
										</div>
									</div><!--end .card-head -->
									<div class="card-body">
										Rather have larger or smaller card headers? There are 4 different sizes.
										<blockquote><small>card-head-xs, card-head-sm, regular, card-head-lg</small></blockquote>
									</div><!--end .card-body -->
								</div><!--end .card -->
							</div><!--end .col -->
							<div class="col-lg-3 col-sm-6">
								<div class="card">
									<div class="card-head card-head-sm style-primary">
										<header>SM header</header>
										<div class="tools">
											<a class="btn btn-icon-toggle btn-close"><i class="md md-close"></i></a>
										</div>
									</div><!--end .card-head -->
									<div class="card-body">
										Rather have larger or smaller card headers? There are 4 different sizes.
										<blockquote><small>card-head-xs, card-head-sm, regular, card-head-lg</small></blockquote>
									</div><!--end .card-body -->
								</div><!--end .card -->
							</div><!--end .col -->
							<div class="col-lg-3 col-sm-6">
								<div class="card">
									<div class="card-head style-primary">
										<header>
											Regular header
										</header>
										<div class="tools">
											<a class="btn btn-icon-toggle btn-close"><i class="md md-close"></i></a>
										</div>
									</div><!--end .card-head -->
									<div class="card-body">
										Rather have larger or smaller card headers? There are 4 different sizes.
										<blockquote><small>card-head-xs, card-head-sm, regular, card-head-lg</small></blockquote>
									</div><!--end .card-body -->
								</div><!--end .card -->
							</div><!--end .col -->
							<div class="col-lg-3 col-sm-6">
								<div class="card">
									<div class="card-head card-head-lg style-primary">
										<header>XL header</header>
										<div class="tools">
											<a class="btn btn-icon-toggle btn-close"><i class="md md-close"></i></a>
										</div>
									</div><!--end .card-head -->
									<div class="card-body">
										Rather have larger or smaller card headers? There are 4 different sizes.
										<blockquote><small>card-head-xs, card-head-sm, regular, card-head-lg</small></blockquote>
									</div><!--end .card-body -->
								</div><!--end .card -->
							</div><!--end .col -->
						</div><!--end .row -->

						<!-- BEGIN HEADER SIZES -->
						<hr class="ruler-xxl"/>

						<!-- BEGIN COLORS -->
						<div class="row">
							<div class="col-lg-12">
								<h2 class="text-primary">Colors</h2>
							</div><!--end .col -->
							<div class="col-lg-8">
								<article class="margin-bottom-xxl">
									<p>
										Convey meaning through color with the styling classes.
									</p>
								</article>
							</div><!--end .col -->
						</div><!--end .row -->
						<div class="row" id="card-colors">
							<div class="col-lg-3 col-sm-6 col-xs-6">
								<div class="card">
									<div class="card-body style-primary-dark height-1"></div>
									<div class="card-body small-padding text-center">.style-primary-dark</div>
								</div>
								<div class="card">
									<div class="card-body style-primary height-1"></div>
									<div class="card-body small-padding text-center">.style-primary</div>
								</div>
								<div class="card">
									<div class="card-body style-primary-light height-1"></div>
									<div class="card-body small-padding text-center">.style-primary-light</div>
								</div>
								<div class="card">
									<div class="card-body style-primary-bright height-1"></div>
									<div class="card-body small-padding text-center">.style-primary-bright</div>
								</div>
							</div><!--end .col -->
							<div class="col-lg-3 col-sm-6 col-xs-6">
								<div class="card">
									<div class="card-body style-accent-dark height-1"></div>
									<div class="card-body small-padding text-center">.style-accent-dark</div>
								</div>
								<div class="card">
									<div class="card-body style-accent height-1"></div>
									<div class="card-body small-padding text-center">.style-accent</div>
								</div>
								<div class="card">
									<div class="card-body style-accent-light height-1"></div>
									<div class="card-body small-padding text-center">.style-accent-light</div>
								</div>
								<div class="card">
									<div class="card-body style-accent-bright height-1"></div>
									<div class="card-body small-padding text-center">.style-accent-bright</div>
								</div>
							</div><!--end .col -->
							<div class="col-lg-2 col-sm-4 col-xs-6">
								<div class="card">
									<div class="card-body style-default-dark height-1"></div>
									<div class="card-body small-padding text-center">.style-default-dark</div>
								</div>
								<div class="card">
									<div class="card-body style-default height-1"></div>
									<div class="card-body small-padding text-center">.style-default</div>
								</div>
								<div class="card">
									<div class="card-body style-default-light height-1"></div>
									<div class="card-body small-padding text-center">.style-default-light</div>
								</div>
								<div class="card">
									<div class="card-body style-default-bright height-1"></div>
									<div class="card-body small-padding text-center">.style-default-bright</div>
								</div>
							</div><!--end .col -->
							<div class="col-lg-2 col-sm-4 col-xs-6">
								<div class="card">
									<div class="card-body style-gray-dark height-1"></div>
									<div class="card-body small-padding text-center">.style-gray-dark</div>
								</div>
								<div class="card">
									<div class="card-body style-gray height-1"></div>
									<div class="card-body small-padding text-center">.style-gray</div>
								</div>
								<div class="card">
									<div class="card-body style-gray-light height-1"></div>
									<div class="card-body small-padding text-center">.style-gray-light</div>
								</div>
								<div class="card">
									<div class="card-body style-gray-bright height-1"></div>
									<div class="card-body small-padding text-center">.style-gray-bright</div>
								</div>
							</div><!--end .col -->
							<div class="col-lg-2 col-sm-4 col-xs-12">
								<div class="card">
									<div class="card-body style-danger height-1"></div>
									<div class="card-body small-padding text-center">.style-danger</div>
								</div>
								<div class="card">
									<div class="card-body style-warning height-1"></div>
									<div class="card-body small-padding text-center">.style-warning</div>
								</div>
								<div class="card">
									<div class="card-body style-success height-1"></div>
									<div class="card-body small-padding text-center">.style-success</div>
								</div>
								<div class="card">
									<div class="card-body style-info height-1"></div>
									<div class="card-body small-padding text-center">.style-info</div>
								</div>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END STYLES - HEADINGS -->

						<hr class="ruler-xxl"/>

						<!-- BEGIN ACTIONBAR -->
						<div class="row">
							<div class="col-lg-12">
								<h2 class="text-primary">Actions</h2>
							</div><!--end .col -->
							<div class="col-lg-12">
								<h4>Actionbar</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									<p>
										Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-head">
										<header>Card with actions</header>
									</div>
									<div class="card-body text-default-light">
										<p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
									</div><!--end .card-body -->
									<div class="card-actionbar">
										<div class="card-actionbar-row">
											<a href="javascript:void(0);" class="btn btn-flat btn-default ink-reaction">Cancel</a>
											<a href="javascript:void(0);" class="btn btn-flat btn-accent ink-reaction">Submit</a>
										</div>
									</div><!--end .card-actionbar -->
								</div><!--end .card -->
								<em class="text-caption">Card with an actionbar</em>
								<div class="card">
									<div class="card-body text-default-light">
										<p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
									</div><!--end .card-body -->
									<div class="card-actionbar">
										<div class="card-actionbar-row">
											<a href="javascript:void(0);" class="btn btn-icon-toggle btn-danger ink-reaction pull-left"><i class="fa fa-heart"></i></a>
											<a href="javascript:void(0);" class="btn btn-icon-toggle btn-default ink-reaction pull-left"><i class="fa fa-reply"></i></a>
											<a href="javascript:void(0);" class="btn btn-flat btn-default-dark ink-reaction">Submit</a>
										</div>
									</div><!--end .card-actionbar -->
								</div><!--end .card -->
								<em class="text-caption">Left and right aligned actions</em>
								<div class="card">
									<div class="card-body text-default-light">
										<p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
									</div><!--end .card-body -->
									<div class="card-actionbar">
										<div class="card-actionbar-row">
											<a href="javascript:void(0);" class="btn btn-icon-toggle btn-danger ink-reaction"><i class="fa fa-heart"></i></a>
											<a href="javascript:void(0);" class="btn btn-icon-toggle btn-default ink-reaction"><i class="fa fa-reply"></i></a>
										</div>
									</div><!--end .card-actionbar -->
									<div class="card-actionbar">
										<div class="card-actionbar-row">
											<a href="javascript:void(0);" class="btn btn-flat btn-default ink-reaction">Cancel</a>
											<a href="javascript:void(0);" class="btn btn-flat btn-accent ink-reaction">Submit</a>
										</div>
									</div><!--end .card-actionbar -->
								</div><!--end .card -->
								<em class="text-caption">Double actionbar</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END ACTIONBAR -->

						<hr class="ruler-xxl"/>

						<!-- BEGIN SCROLLBAR -->
						<div class="row">
							<div class="col-lg-12">
								<h2 class="text-primary">Behavior</h2>
							</div><!--end .col -->
							<div class="col-lg-12">
								<h4>Single scrollbar</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									<p>
										Cards can be given a fixed height with a custom scroll bar.
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-head">
										<header>Scroll Card</header>
									</div>
									<div class="card-body height-6 scroll style-default-bright">
										<p>Cu conceptam vituperata temporibus has. Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Omnis modus phaedrum an vim, pri ipsum quando no.</p>
										<p>Eros facete ponderum et vix. Quo nisl pertinax at, mea ea ullum simul ponderum. Postulant definiebas ius et, quas voluptaria moderatius pro ex, ea augue aeque labitur mea. Cu quo explicari iracundia, et quo primis ceteros moderatius. Veniam ubique laboramus ut pri, cu mea causae docendi. Cum an tritani civibus, est quem error malorum ei, quod fuisset eu sed.</p>
										<p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
										<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
										<p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Hover to see the scroller</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Multiple scrollbars</h4>
							</div><!--end .col -->
							<div class="col-lg-3 col-md-4">
								<article class="margin-bottom-xxl">
									<p>
										Multiple scrollers can exist in one card.
									</p>
								</article>
							</div><!--end .col -->
							<div class="col-lg-offset-1 col-md-8">
								<div class="card">
									<div class="card-head">
										<header>Divided card</header>
									</div>
									<div class="card-body height-3 scroll style-default-bright">
										<p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
										<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
									</div>
									<div class="card-body height-3 scroll style-primary">
										<p>Cu conceptam vituperata temporibus has. Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Omnis modus phaedrum an vim, pri ipsum quando no.</p>
										<p>Eros facete ponderum et vix. Quo nisl pertinax at, mea ea ullum simul ponderum. Postulant definiebas ius et, quas voluptaria moderatius pro ex, ea augue aeque labitur mea. Cu quo explicari iracundia, et quo primis ceteros moderatius. Veniam ubique laboramus ut pri, cu mea causae docendi. Cum an tritani civibus, est quem error malorum ei, quod fuisset eu sed.</p>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Multiple card bodies with scroller</em>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END SCROLLBAR -->

					</div><!--end .section-body -->
				</section>
			</div><!--end #content-->
			<!-- END CONTENT -->

			<!-- BEGIN MENUBAR-->
			<div id="menubar" class="menubar-inverse ">
				<div class="menubar-fixed-panel">
					<div>
						<a class="btn btn-icon-toggle btn-default menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
							<i class="fa fa-bars"></i>
						</a>
					</div>
					<div class="expanded">
						<a href="../../html/dashboards/dashboard.html">
							<span class="text-lg text-bold text-primary ">MATERIAL&nbsp;ADMIN</span>
						</a>
					</div>
				</div>
				<div class="menubar-scroll-panel">

					<!-- BEGIN MAIN MENU -->
					<ul id="main-menu" class="gui-controls">

						<!-- BEGIN DASHBOARD -->
						<li>
							<a href="../../html/dashboards/dashboard.html" >
								<div class="gui-icon"><i class="md md-home"></i></div>
								<span class="title">Dashboard</span>
							</a>
						</li><!--end /menu-li -->
						<!-- END DASHBOARD -->

						<!-- BEGIN EMAIL -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><i class="md md-email"></i></div>
								<span class="title">Email</span>
							</a>
							<!--start submenu -->
							<ul>
								<li><a href="../../html/mail/inbox.html" ><span class="title">Inbox</span></a></li>
								<li><a href="../../html/mail/compose.html" ><span class="title">Compose</span></a></li>
								<li><a href="../../html/mail/reply.html" ><span class="title">Reply</span></a></li>
								<li><a href="../../html/mail/message.html" ><span class="title">View message</span></a></li>
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END EMAIL -->

						<!-- BEGIN DASHBOARD -->
						<li>
							<a href="../../html/layouts/builder.html" >
								<div class="gui-icon"><i class="md md-web"></i></div>
								<span class="title">Layouts</span>
							</a>
						</li><!--end /menu-li -->
						<!-- END DASHBOARD -->

						<!-- BEGIN UI -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><i class="fa fa-puzzle-piece fa-fw"></i></div>
								<span class="title">UI elements</span>
							</a>
							<!--start submenu -->
							<ul>
								<li><a href="../../html/ui/colors.html" ><span class="title">Colors</span></a></li>
								<li><a href="../../html/ui/typography.html" ><span class="title">Typography</span></a></li>
								<li><a href="../../html/ui/cards.html" class="active"><span class="title">Cards</span></a></li>
								<li><a href="../../html/ui/buttons.html" ><span class="title">Buttons</span></a></li>
								<li><a href="../../html/ui/lists.html" ><span class="title">Lists</span></a></li>
								<li><a href="../../html/ui/tabs.html" ><span class="title">Tabs</span></a></li>
								<li><a href="../../html/ui/accordions.html" ><span class="title">Accordions</span></a></li>
								<li><a href="../../html/ui/messages.html" ><span class="title">Messages</span></a></li>
								<li><a href="../../html/ui/offcanvas.html" ><span class="title">Off-canvas</span></a></li>
								<li><a href="../../html/ui/grid.html" ><span class="title">Grid</span></a></li>
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Icons</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="../../html/ui/icons/materialicons.html" ><span class="title">Material Design Icons</span></a></li>
										<li><a href="../../html/ui/icons/fontawesome.html" ><span class="title">Font Awesome</span></a></li>
										<li><a href="../../html/ui/icons/glyphicons.html" ><span class="title">Glyphicons</span></a></li>
										<li><a href="../../html/ui/icons/skycons.html" ><span class="title">Skycons</span></a></li>
									</ul><!--end /submenu -->
								</li><!--end /menu-li -->
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END UI -->

						<!-- BEGIN TABLES -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><i class="fa fa-table"></i></div>
								<span class="title">Tables</span>
							</a>
							<!--start submenu -->
							<ul>
								<li><a href="../../html/tables/static.html" ><span class="title">Static Tables</span></a></li>
								<li><a href="../../html/tables/dynamic.html" ><span class="title">Dynamic Tables</span></a></li>
								<li><a href="../../html/tables/responsive.html" ><span class="title">Responsive Table</span></a></li>
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END TABLES -->

						<!-- BEGIN FORMS -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><span class="glyphicon glyphicon-list-alt"></span></div>
								<span class="title">Forms</span>
							</a>
							<!--start submenu -->
							<ul>
								<li><a href="../../html/forms/basic.html" ><span class="title">Form basic</span></a></li>
								<li><a href="../../html/forms/advanced.html" ><span class="title">Form advanced</span></a></li>
								<li><a href="../../html/forms/layouts.html" ><span class="title">Form layouts</span></a></li>
								<li><a href="../../html/forms/editors.html" ><span class="title">Editors</span></a></li>
								<li><a href="../../html/forms/validation.html" ><span class="title">Form validation</span></a></li>
								<li><a href="../../html/forms/wizard.html" ><span class="title">Form wizard</span></a></li>
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END FORMS -->

						<!-- BEGIN PAGES -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><i class="md md-computer"></i></div>
								<span class="title">Pages</span>
							</a>
							<!--start submenu -->
							<ul>
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Contacts</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="../../html/pages/contacts/search.html" ><span class="title">Search</span></a></li>
										<li><a href="../../html/pages/contacts/details.html" ><span class="title">Contact card</span></a></li>
										<li><a href="../../html/pages/contacts/add.html" ><span class="title">Insert contact</span></a></li>
									</ul><!--end /submenu -->
								</li><!--end /menu-li -->
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Search</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="../../html/pages/search/results-text.html" ><span class="title">Results - Text</span></a></li>
										<li><a href="../../html/pages/search/results-text-image.html" ><span class="title">Results - Text and Image</span></a></li>
									</ul><!--end /submenu -->
								</li><!--end /menu-li -->
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Blog</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="../../html/pages/blog/masonry.html" ><span class="title">Blog masonry</span></a></li>
										<li><a href="../../html/pages/blog/list.html" ><span class="title">Blog list</span></a></li>
										<li><a href="../../html/pages/blog/post.html" ><span class="title">Blog post</span></a></li>
									</ul><!--end /submenu -->
								</li><!--end /menu-li -->
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Error pages</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="../../html/pages/404.html" ><span class="title">404 page</span></a></li>
										<li><a href="../../html/pages/500.html" ><span class="title">500 page</span></a></li>
									</ul><!--end /submenu -->
								</li><!--end /menu-li -->
								<li><a href="../../html/pages/profile.html" ><span class="title">User profile<span class="badge style-accent">42</span></span></a></li>
								<li><a href="../../html/pages/invoice.html" ><span class="title">Invoice</span></a></li>
								<li><a href="../../html/pages/calendar.html" ><span class="title">Calendar</span></a></li>
								<li><a href="../../html/pages/pricing.html" ><span class="title">Pricing</span></a></li>
								<li><a href="../../html/pages/timeline.html" ><span class="title">Timeline</span></a></li>
								<li><a href="../../html/pages/maps.html" ><span class="title">Maps</span></a></li>
								<li><a href="../../html/pages/locked.html" ><span class="title">Lock screen</span></a></li>
								<li><a href="../../html/pages/login.html" ><span class="title">Login</span></a></li>
								<li><a href="../../html/pages/blank.html" ><span class="title">Blank page</span></a></li>
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END FORMS -->

						<!-- BEGIN CHARTS -->
						<li>
							<a href="../../html/charts/charts.html" >
								<div class="gui-icon"><i class="md md-assessment"></i></div>
								<span class="title">Charts</span>
							</a>
						</li><!--end /menu-li -->
						<!-- END CHARTS -->

						<!-- BEGIN LEVELS -->
						<li class="gui-folder">
							<a>
								<div class="gui-icon"><i class="fa fa-folder-open fa-fw"></i></div>
								<span class="title">Menu levels demo</span>
							</a>
							<!--start submenu -->
							<ul>
								<li><a href="#"><span class="title">Item 1</span></a></li>
								<li><a href="#"><span class="title">Item 1</span></a></li>
								<li class="gui-folder">
									<a href="javascript:void(0);">
										<span class="title">Open level 2</span>
									</a>
									<!--start submenu -->
									<ul>
										<li><a href="#"><span class="title">Item 2</span></a></li>
										<li class="gui-folder">
											<a href="javascript:void(0);">
												<span class="title">Open level 3</span>
											</a>
											<!--start submenu -->
											<ul>
												<li><a href="#"><span class="title">Item 3</span></a></li>
												<li><a href="#"><span class="title">Item 3</span></a></li>
												<li class="gui-folder">
													<a href="javascript:void(0);">
														<span class="title">Open level 4</span>
													</a>
													<!--start submenu -->
													<ul>
														<li><a href="#"><span class="title">Item 4</span></a></li>
														<li class="gui-folder">
															<a href="javascript:void(0);">
																<span class="title">Open level 5</span>
															</a>
															<!--start submenu -->
															<ul>
																<li><a href="#"><span class="title">Item 5</span></a></li>
																<li><a href="#"><span class="title">Item 5</span></a></li>
															</ul><!--end /submenu -->
														</li><!--end /submenu-li -->
													</ul><!--end /submenu -->
												</li><!--end /submenu-li -->
											</ul><!--end /submenu -->
										</li><!--end /submenu-li -->
									</ul><!--end /submenu -->
								</li><!--end /submenu-li -->
							</ul><!--end /submenu -->
						</li><!--end /menu-li -->
						<!-- END LEVELS -->

					</ul><!--end .main-menu -->
					<!-- END MAIN MENU -->

					<div class="menubar-foot-panel">
						<small class="no-linebreak hidden-folded">
							<span class="opacity-75">Copyright &copy; 2014</span> <strong>CodeCovers</strong>
						</small>
					</div>
				</div><!--end .menubar-scroll-panel-->
			</div><!--end #menubar-->
			<!-- END MENUBAR -->

			<!-- BEGIN OFFCANVAS RIGHT -->
			<div class="offcanvas">

				<!-- BEGIN OFFCANVAS SEARCH -->
				<div id="offcanvas-search" class="offcanvas-pane width-8">
					<div class="offcanvas-head">
						<header class="text-primary">Search</header>
						<div class="offcanvas-tools">
							<a class="btn btn-icon-toggle btn-default-light pull-right" data-dismiss="offcanvas">
								<i class="md md-close"></i>
							</a>
						</div>
					</div>
					<div class="offcanvas-body no-padding">
						<ul class="list ">
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>A</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar4.jpg?1404026791" alt="" />
									</div>
									<div class="tile-text">
										Alex Nelson
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar9.jpg?1404026744" alt="" />
									</div>
									<div class="tile-text">
										Ann Laurens
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>J</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar2.jpg?1404026449" alt="" />
									</div>
									<div class="tile-text">
										Jessica Cruise
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar8.jpg?1404026729" alt="" />
									</div>
									<div class="tile-text">
										Jim Peters
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>M</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar5.jpg?1404026513" alt="" />
									</div>
									<div class="tile-text">
										Mabel Logan
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar11.jpg?1404026774" alt="" />
									</div>
									<div class="tile-text">
										Mary Peterson
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar3.jpg?1404026799" alt="" />
									</div>
									<div class="tile-text">
										Mike Alba
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>N</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar6.jpg?1404026572" alt="" />
									</div>
									<div class="tile-text">
										Nathan Peterson
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>P</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar7.jpg?1404026721" alt="" />
									</div>
									<div class="tile-text">
										Philip Ericsson
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
							<li class="tile divider-full-bleed">
								<div class="tile-content">
									<div class="tile-text"><strong>S</strong></div>
								</div>
							</li>
							<li class="tile">
								<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
									<div class="tile-icon">
										<img src="../../assets/img/avatar10.jpg?1404026762" alt="" />
									</div>
									<div class="tile-text">
										Samuel Parsons
										<small>123-123-3210</small>
									</div>
								</a>
							</li>
						</ul>
					</div><!--end .offcanvas-body -->
				</div><!--end .offcanvas-pane -->
				<!-- END OFFCANVAS SEARCH -->

				<!-- BEGIN OFFCANVAS CHAT -->
				<div id="offcanvas-chat" class="offcanvas-pane style-default-light width-12">
					<div class="offcanvas-head style-default-bright">
						<header class="text-primary">Chat with Ann Laurens</header>
						<div class="offcanvas-tools">
							<a class="btn btn-icon-toggle btn-default-light pull-right" data-dismiss="offcanvas">
								<i class="md md-close"></i>
							</a>
							<a class="btn btn-icon-toggle btn-default-light pull-right" href="#offcanvas-search" data-toggle="offcanvas" data-backdrop="false">
								<i class="md md-arrow-back"></i>
							</a>
						</div>
						<form class="form">
							<div class="form-group floating-label">
								<textarea name="sidebarChatMessage" id="sidebarChatMessage" class="form-control autosize" rows="1"></textarea>
								<label for="sidebarChatMessage">Leave a message</label>
							</div>
						</form>
					</div>
					<div class="offcanvas-body">
						<ul class="list-chats">
							<li>
								<div class="chat">
									<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar1.jpg?1403934956" alt="" /></div>
									<div class="chat-body">
										Yes, it is indeed very beautiful.
										<small>10:03 pm</small>
									</div>
								</div><!--end .chat -->
							</li>
							<li class="chat-left">
								<div class="chat">
									<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar9.jpg?1404026744" alt="" /></div>
									<div class="chat-body">
										Did you see the changes?
										<small>10:02 pm</small>
									</div>
								</div><!--end .chat -->
							</li>
							<li>
								<div class="chat">
									<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar1.jpg?1403934956" alt="" /></div>
									<div class="chat-body">
										I just arrived at work, it was quite busy.
										<small>06:44pm</small>
									</div>
									<div class="chat-body">
										I will take look in a minute.
										<small>06:45pm</small>
									</div>
								</div><!--end .chat -->
							</li>
							<li class="chat-left">
								<div class="chat">
									<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar9.jpg?1404026744" alt="" /></div>
									<div class="chat-body">
										The colors are much better now.
									</div>
									<div class="chat-body">
										The colors are brighter than before.
										I have already sent an example.
										This will make it look sharper.
										<small>Mon</small>
									</div>
								</div><!--end .chat -->
							</li>
							<li>
								<div class="chat">
									<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar1.jpg?1403934956" alt="" /></div>
									<div class="chat-body">
										Are the colors of the logo already adapted?
										<small>Last week</small>
									</div>
								</div><!--end .chat -->
							</li>
						</ul>
					</div><!--end .offcanvas-body -->
				</div><!--end .offcanvas-pane -->
				<!-- END OFFCANVAS CHAT -->

			</div><!--end .offcanvas-->
			<!-- END OFFCANVAS RIGHT -->

		</div><!--end #base-->
		<!-- END BASE -->

		<!-- BEGIN JAVASCRIPT -->
		<script src="../../assets/js/libs/jquery/jquery-1.11.2.min.js"></script>
		<script src="../../assets/js/libs/jquery/jquery-migrate-1.2.1.min.js"></script>
		<script src="../../assets/js/libs/bootstrap/bootstrap.min.js"></script>
		<script src="../../assets/js/libs/spin.js/spin.min.js"></script>
		<script src="../../assets/js/libs/autosize/jquery.autosize.min.js"></script>
		<script src="../../assets/js/libs/nanoscroller/jquery.nanoscroller.min.js"></script>
		<script src="../../assets/js/core/source/App.js"></script>
		<script src="../../assets/js/core/source/AppNavigation.js"></script>
		<script src="../../assets/js/core/source/AppOffcanvas.js"></script>
		<script src="../../assets/js/core/source/AppCard.js"></script>
		<script src="../../assets/js/core/source/AppForm.js"></script>
		<script src="../../assets/js/core/source/AppNavSearch.js"></script>
		<script src="../../assets/js/core/source/AppVendor.js"></script>
		<script src="../../assets/js/core/demo/Demo.js"></script>
		<!-- END JAVASCRIPT -->

	</body>
</html>
